<template>
  <div style="background: #f4f4f4">
    <div style="margin: 0 auto; width: 60%; padding: 25px">
      <div class="app-container">
        <el-form
            ref="ruleForm"
            :model="formData"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
        >
          <div class="grid-content bg-purple" style="background: floralwhite; padding: 50px">
            <el-form-item label="头像">
              <el-upload
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  class="avatar-uploader"
                  action="/dev-api/file/upload"
              >
                <img v-if="formData.icon" id="avatar" :src="avatarUrl" class="avatar"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name" type="text"/>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input-number v-model="formData.age" :min="1" :max="200" label="请输入年龄"></el-input-number>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio v-model="formData.gender" :label="1">男</el-radio>
              <el-radio v-model="formData.gender" :label="0">女</el-radio>
            </el-form-item>
            <el-form-item label="简介" prop="introduction">
              <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="简介"
                  v-model="formData.introduction">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">提交</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import {teacherInfo, putObj} from '@/api/teacher/teacher'

export default {
  name: "info",
  data() {
    const validatePhone = (rule, value, callback) => {
      // if (isValidateNoneMobile(value)[0]) {
      //   callback(new Error(isValidateNoneMobile(value)[1]));
      // } else {
      //   callback();
      // }
    };
    const validatePass = (rule, value, callback) => {
      if (this.ruleForm.password !== "") {
        if (value !== this.ruleForm.newpassword1) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      avatarUrl: "",
      headers: {
        Authorization: "Bearer " + store.getters.token,
      },
      formData: {
        id: '',
        name: "",
        icon: "",
        age: "",
        gender: "",
        introduction: ""
      },
      rules: {
        tel: [{required: false, validator: validatePhone, trigger: "blur"}],
        password: [
          {
            required: true,
            min: 6,
            message: "原密码不少于6位",
            trigger: "blur",
          },
        ],
        newpassword1: [
          {
            required: false,
            min: 6,
            message: "新密码不少于6位",
            trigger: "blur",
          },
        ],
        newpassword2: [
          {required: false, validator: validatePass, trigger: "blur"},
        ],
      },
    };
  },
  created() {
    console.log(store.getters.token)
    this.getUserInfoEdit();
  },
  methods: {
    getUserInfoEdit() {
      var token = store.getters.token;
      let formData = new FormData();
      formData.append("token", token)
      teacherInfo(formData).then((res) => {
        this.formData = res.data
        this.avatarUrl = res.data.icon;

      })
    },
    submitForm() {
      console.log(this.formData)
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        putObj(this.formData).then((response) => {
          this.$notify.success("修改成功");
        });
      });
    },
    handleAvatarSuccess(res, file) {
      this.formData.icon = res.data;
      this.avatarUrl = res.data;
    }
  },
};
</script>
<style lang="scss">
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
